<template>
<div class="container">
    <div class="left">
        <img src="../../assets/image/groupAssemble/test.png">
    </div>
    <div class="right">
        <!-- // 引入列表单个商品的标题模块 -->
        <goods-topic></goods-topic>

        <div class="rightPer" v-if="GoodsListOne.numberShow">
            <!-- 引入下面的拼团模块的二人团  在0元试用的时候，则是限4件-->
            <person-number :PersonNumber="GoodsListOne.personGroup"></person-number>
            <!-- 引入0元试用模块的已经多少人申请，拼团模块的多少人抢购 -->
            <goods-number :GoodsNumber="GoodsListOne.GoodsNumber"></goods-number>
        </div>
        <!-- 进度条模块 -->
        <progress-bar class="rightPer" v-show="GoodsListOne.barShow"></progress-bar>

        <div class="bottomList">
            <!-- 引入价格模块 -->
            <goods-price class="goodsPrice"></goods-price>
            <!-- 引入立即组团,获取立即申请按钮模块 -->
            <immediately-assemble class="ImmediatelyAssemble" :Immediately="GoodsListOne.Immediately"></immediately-assemble>
        </div>

    </div>
    <div style="clear:both"></div>
</div>
</template>

<script>
// 引入列表单个商品的标题模块
import GoodsTopic from '../commentCompontents/activityFour/goodsTopic'
// 引入0元试用模块的已经多少人申请，拼团模块的多少人抢购
import GoodsNumber from '../commentCompontents/activityFour/goodsNumber'
// 引入2人团模块在0元试用的时候，则是限4件
import PersonNumber from '../commentCompontents/activityFour/personNumber'
// 引入价格和划线价模块
import GoodsPrice from '../commentCompontents/goodsPrice'
// 立即组团按钮,或者是0元试用的立即申请 或者是每日秒杀的立即抢购
import ImmediatelyAssemble from '../commentCompontents/immediatelyAssemble'
// 引入进度条模块，主要是为了在秒杀界面使用
import ProgressBar from '../commentCompontents/progressBar'
export default {
    name: "GoodsListOne",
    components: {

        GoodsTopic,
        GoodsNumber,
        PersonNumber,
        GoodsPrice,
        ImmediatelyAssemble,
        ProgressBar
    },
    // 
    props: {
        GoodsListOne: Object,
    }

}
</script>

<style scoped>
.container {
    width: 100%;
    font-size: .4rem;
    height: 3rem;

}

.left {
    width: 30%;
    height: 90%;
    float: left;
}

.left>img {
    width: 100%;
    height: 100%;
}

.right {

    width: 60%;
    height: 90%;
    float: left;
    padding-left: 5%;

}

.rightPer {
    display: -webkit-flex;
    display: flex;
    align-items: baseline;
    height: .5rem;
    margin-top: .3rem;
}

.bottomList {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.goodsPrice {}

.ImmediatelyAssemble {}
</style>
